<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>

  <style>
    [v-cloak] {
      display: none
    }

    tbody {
      background-image: linear-gradient(#a1d583 10%, #ffffff 100%);
    }

    .top-tr {
      text-align: center;
    }

    .top-tr td {
      height: 50px;
      font-size: 25px;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      /* background: darkgray; */
    }

    .title td {
      height: 40px;
      letter-spacing: 3px;
    }

    .content {
      text-align: center;
    }

    .content td {
      /* border: 1px solid black */
    }




    table {
      border-right: 1px solid black;
      border-bottom: 1px solid black
    }

    td {
      border-left: 1px solid black;
      border-top: 1px solid black
    }

    #app {
      display: flex;
      align-items: center;
      justify-content: start;
      background: white;
      position: relative;
      height: 100%;
    }

    .huiyuan {
      display: flex;
    }

    .huiyuan div {
      width: 59px;
      font-size: 60px;
      font-weight: bolder;
      margin-left: 25px;
      text-align: center;
    }

    .box {
      background: #a1d583;
      padding: 10px;
      height: 95vh;
    }

    #icon {
      right: -16px;
      position: absolute;
      bottom: 50px;
    }

    #icon img {
      width: 66px;
      position: absolute;
      bottom: 0;
      right: 122px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div id="app" v-cloak>
      <div class="huiyuan">
        <div>会员信息</div>
      </div>

      <div style="width: 90%;padding: 10px 20px;">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
          <tr class="top-tr">
            <td colspan="6">
              {{shopName}}
            </td>
          </tr>
          <tr class="title">
            <td width="10%">会员一</td>
            <td width="10%">号码</td>
            <td>套餐</td>
            <td>到期</td>
            <td>活动</td>
            <td width="20%">地址</td>
          </tr>
          <tr v-for="(item,index) in list" class="content">
            <td>{{item.name}}</td>
            <td>{{item.telephone}}</td>
            <td>{{item.setMeal}}</td>
            <td>{{item.expire}}</td>
            <td>{{item.canActive}}</td>
            <td>{{item.address}}</td>
          </tr>
          <!-- <tr v-for="(item,index) in 15" class="content">
						<td>双方各</td>
						<td>尔特</td>
						<td>才能保持</td>
						<td>问问v</td>
						<td>沃尔沃二</td>
						<td>送人头cccccccccc</td>
					</tr> -->
        </table>
      </div>
      <!-- 返回 -->
      <div id="icon">
        <img src="../img/返回.png" alt="">
      </div>
    </div>
  </div>
</body>
<script src="../js//index.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data: function () {
      return {
        shopName: '',
        data: {},
        list: []
      }
    },
    created() {
      this.shopName = localStorage.getItem("shopName") || '万达华为';
      this.getData()
    },
    methods: {
      getData() {
        let _this = this
        let _url = baseUrl + '/shop/getMembers?shopName=' + this.shopName
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(_url).then(e => {
          console.info(e)
          if (null != e && null != e.data) {
            _this.list = e.data.data.slice(0, 25)
            // _this.list = e.data.data
          }
        }).catch(error => {});
      },

    }

  })
  let icon = document.getElementById('icon')
  icon.onclick = () => {
    window.location.href = "../views/info.html";
  }
</script>

</html>